Event Delegation এবং Bubbling

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Event Management |

Event delegation এবং bubbling হচ্ছে দুইটি গুরুত্বপূর্ণ ধারণা যা ওয়েব ডেভেলপমেন্টে ইভেন্ট হ্যান্ডলিংয়ের সময় ব্যবহৃত হয়। ExtJS তে এই ধারণাগুলোর ব্যবহার কার্যকরী এবং অ্যাপ্লিকেশন ডেভেলপমেন্টের ক্ষেত্রে পারফরম্যান্স এবং স্কেলেবিলিটি উন্নত করতে সহায়তা করে।

১. Event Delegation

Event Delegation হল একটি কৌশল, যেখানে একটি প্যারেন্ট কম্পোনেন্ট বা এলিমেন্টের ইভেন্ট হ্যান্ডলার একটি চাইল্ড এলিমেন্টের উপর কাজ করে। এটি মূলত ইভেন্ট হ্যান্ডলারকে প্যারেন্ট এলিমেন্টে অ্যাটাচ করে, এবং যখন চাইল্ড এলিমেন্টে কোনো ইভেন্ট ট্রিগার হয়, তখন প্যারেন্ট এলিমেন্ট সেই ইভেন্টটি ক্যাচ করে এবং সঠিক ইভেন্ট হ্যান্ডলার চালায়।

এই কৌশলের মূল সুবিধা হচ্ছে, আপনি একাধিক চাইল্ড এলিমেন্টের জন্য একাধিক ইভেন্ট হ্যান্ডলার না লিখে, একটি সিঙ্গেল ইভেন্ট হ্যান্ডলার দিয়ে সব চাইল্ড এলিমেন্টের ইভেন্ট হ্যান্ডল করতে পারেন। এটি কোডকে আরও কার্যকরী এবং স্কেলেবল করে তোলে।

ExtJS তে Event Delegation এর ব্যবহার:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Event Delegation Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Button 1',
        itemId: 'button1'
    }, {
        xtype: 'button',
        text: 'Button 2',
        itemId: 'button2'
    }],
    
    listeners: {
        render: function() {
            this.el.on('click', function(e, target) {
                // Event delegation: identify which button was clicked
                if (target.id === 'button1') {
                    console.log('Button 1 clicked!');
                } else if (target.id === 'button2') {
                    console.log('Button 2 clicked!');
                }
            });
        }
    }
});

ব্যাখ্যা:

এখানে, this.el.on ব্যবহার করে প্যানেলের রেন্ডার হওয়ার পর প্যানেলের সমস্ত এলিমেন্টে click ইভেন্ট ডেলিগেট করা হয়েছে।
একাধিক বাটনের জন্য আলাদা ইভেন্ট হ্যান্ডলার না দিয়ে, প্যারেন্ট এলিমেন্ট থেকে সিঙ্গেল হ্যান্ডলার ব্যবহার করা হয়েছে।
ইভেন্টের target.id যাচাই করে কোন বাটন ক্লিক হয়েছে তা শনাক্ত করা হয়েছে।

২. Event Bubbling

Event Bubbling হল একটি কৌশল, যেখানে একটি ইভেন্ট একটি চাইল্ড এলিমেন্ট থেকে শুরু হয় এবং ধীরে ধীরে তার প্যারেন্ট এলিমেন্টগুলোর দিকে "বাবল" করে উঠে। অর্থাৎ, যখন কোনো ইভেন্ট কোনো চাইল্ড এলিমেন্টে ঘটে, তখন তা প্যারেন্ট এলিমেন্টগুলির মাধ্যমে উপরে উঠে আসে, যতক্ষণ না তা ডকুমেন্টের রুট (document root) পর্যন্ত পৌঁছায়।

ExtJS তে Event Bubbling এর ব্যবহার:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Event Bubbling Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Click Me!',
        itemId: 'clickButton'
    }],
    
    listeners: {
        render: function() {
            // Bubbling: Catch the click event from child elements (like button)
            this.el.on('click', function(e, target) {
                console.log('Event bubbling triggered!');
            });
        }
    }
});

ব্যাখ্যা:

এখানে, this.el.on('click', ...) ব্যবহার করা হয়েছে। এটি একটি উদাহরণ যেখানে প্যানেলটি ইভেন্ট বব্বলিংয়ের মাধ্যমে সমস্ত চাইল্ড এলিমেন্টের ক্লিক ইভেন্ট গ্রহণ করছে।
যেহেতু বাটনটি প্যানেলের একটি চাইল্ড, বাটন ক্লিক হলে এটি ইভেন্টটি বাবল করে প্যানেলে পৌঁছে এবং প্যানেলের ইভেন্ট হ্যান্ডলার সেট হয়।